<template>
	<view class="user-coupon-detail" :style="{background:pageColor}" v-if="detail.id">
		<view class="space-md"></view>
		<view class="get-img rel">
			<image class="get-img"
				:src="`https://api.huixuananmm.com/admin/anmo/coupon/${detail.get_status==1?'get-suc':'get-fail'}.png`">
			</image>
			<view class="get-img abs">
				<view class="title c-base text-bold rel">{{detail.get_status==1?'领取成功！':'领取失败！'}}</view>
				<view class="content flex-center flex-column f-caption c-base rel">
					<block v-if="detail.get_status==-1">
						<view class="flex-y-baseline">很抱歉, <view class="f-mini-title" style="color: #FFE942;">卡券已失效
							</view>,
							领取失败
						</view>
						<view>可以去首页碰碰运气哟~</view>
					</block>
					<block v-if="detail.get_status==0">
						<view class="flex-y-baseline">您的<view class="f-mini-title" style="color: #FFE942;">手速慢啦~
							</view>
						</view>
						<view>卡券已被他人领取了哟</view>
					</block>
					<block v-if="detail.get_status==1">
						<view class="flex-y-baseline">恭喜您<view class="f-mini-title" style="color: #FFE942;">成功领取
							</view>
							好友赠送的卡券
						</view>
						<view>限时福利已开启快去下单体验吧~</view>
					</block>
				</view>
			</view>
		</view>
		<view class="list-item rel fill-base" v-if="detail.get_status==1">
			<view class="bg abs" :style="{background:primaryColor}"></view>
			<view class="flex-center rel" style="z-index: 2;">
				<view class="item-price flex-center flex-column c-base rel"
					:style="{background:`linear-gradient( 180deg, ${color} 0%, ${primaryColor} 100%)`}">
					<view class="dot-item abs fill-base radius left"></view>
					<view class="dot-item abs fill-base radius right"></view>
					<view class="flex-y-baseline f-sm-title text-bold">¥<view style="font-size:48rpx">
							{{detail.discount}}
						</view>
					</view>
					<view class="mt-sm f-icontext">{{detail.type==0?`满${detail.full}元可用`:'无门槛'}}</view>
				</view>
				<view class="flex-1 ml-lg" style="color:#1F1F1F">
					<view class="f-mini-title c-title text-bold max-450 ellipsis" style="margin: 5rpx 0;">
						{{detail.title}}
					</view>
					<view class="mt-md flex-y-center f-icontext">
						<view>共{{detail.num}}张</view>
					</view>
					<view class="flex-y-center f-icontext mt-sm">有效期至<view style="margin-left: 14rpx;">
							{{detail.end_time}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<image class="data-img" src="https://api.huixuananmm.com/admin/anmo/coupon/get-data.png" v-else>
		</image>

		<view class="flex-center">
			<view @tap.stop="$util.goUrl({url:`/pages/service`,openType:`reLaunch`})"
				class="home-btn flex-center c-base radius" :style="{background:primaryColor}">
				{{detail.get_status==1?'去使用':'去首页'}}
			</view>
		</view>

		<view class="space-footer"></view>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				options: {},
				color: '',
				detail: {},
				loading: true,
				lockTap: false
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
		}),
		async onLoad(options) {
			this.options = options
			await this.initIndex()
			if (this.scanRecordId) {
				this.updateScanRecord()
			}
		},
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo', 'addScanRecord', 'updateScanRecord']),
			async initIndex(refresh = false) {
				this.$util.showLoading()
				let {
					id,
					pid,
				} = this.options
				let code = this.scanRecordId
				// #ifdef H5
				code = this.$util.getQueryString('code')
				// #endif
				if (pid && !code) {
					this.addScanRecord({
						type: 15,
						qr_id: pid,
						is_qr: 0
					})
				}
				let {
					id: uid = 0
				} = this.userInfo
				if (!this.configInfo.id || refresh || (pid && code && !uid)) {
					await this.getConfigInfo()
				}
				if (pid && !code && !uid) {
					await this.getUserInfo()
				}
				let get_status = await this.$api.mine.couponGiftGet({
					id
				})
				// -1 失效;0已被他人领取;1成功
				if (get_status == 1) {
					let data = await this.$api.mine.couponGiftInfo({
						id
					})
					this.detail = Object.assign({}, data.coupon, {
						get_status
					})
				} else {
					this.detail = {
						id,
						get_status
					}
				}
				this.$util.hideAll()
				this.color = this.$util.rgbColor(this.primaryColor)
				this.$util.setNavigationBarColor({
					bg: this.primaryColor,
				})
				// #ifdef H5
				if (!refresh) {
					this.$jweixin.hideOptionMenu()
				}
				// #endif
			},
			initRefresh() {
				this.initIndex(true)
			}
		}
	}
</script>


<style lang="scss">
	.user-coupon-detail {
		.get-img {
			width: 750rpx;
			height: 410rpx;
		}

		.get-img.abs {
			top: 0;
			left: 0;

			.title {
				top: 115rpx;
				left: 155rpx;
				font-size: 75rpx;
			}

			.content {
				top: 185rpx;

				.flex-y-baseline {
					margin-bottom: 8rpx;
				}
			}
		}

		.data-img {
			width: 348rpx;
			height: 217rpx;
			margin: 203rpx auto;
		}

		.list-item {
			height: 190rpx;
			border-radius: 18rpx;
			margin: 40rpx 30rpx 393rpx 30rpx;

			.bg {
				opacity: 0.1;
				border-radius: 18rpx;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 1;
			}


			.item-price {
				width: 200rpx;
				height: 190rpx;
				border-radius: 18rpx;
				overflow: hidden;

				.dot-item {
					width: 24rpx;
					height: 24rpx;
					top: 83rpx;
				}

				.dot-item.left {
					left: -12rpx;
				}

				.dot-item.right {
					right: -12rpx;
				}
			}

		}

		.home-btn {
			width: 500rpx;
			height: 88rpx;
			font-size: 36rpx;
		}
	}
</style>